<template>
    <div>
        <el-form label-width="120px" >

            <el-form-item label="商品主图" >
                

                <el-image @click="chooseImage" :src=" WQ_ADDONS_URL + '/storage/' + product.image "  >
                    <template #placeholder>
                        <div class="image-slot">Loading<span class="dot">...</span></div>
                    </template>
                    <template #error>
                        <div  @click="chooseImage" class="image-slot">
                            <el-icon><icon-picture /></el-icon>
                        </div>
                    </template>
                </el-image>
                <el-input type="hidden" v-model="product.image" />
            </el-form-item>

            <el-form-item label="附加图">
                <el-button @click="addGoodsImage">添加</el-button>
                <el-table :data="product.goods_images">
                    <el-table-column prop="图片" label="图片" width="180" >
                        <template #default="scope">
                            <el-image @click="chooseExtraImage( scope.row )" :src=" VITE_URL + '/storage/' +  scope.row.url "  >
                                <template #placeholder>
                                    <div class="image-slot">Loading<span class="dot">...</span></div>
                                </template>
                                <template #error>
                                    <div  @click="chooseExtraImage( scope.row )" class="image-slot">
                                        <el-icon><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="排序" label="排序" width="180" >
                        <template #default="scope">
                            <el-input-number v-model="scope.row.sort_order" :min="0" :max="100"  />
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" >
                        <template #default="scope">
                            <el-button @click="deleteGoodsImage( scope.$index )">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
    
        <FileManager :FileManagerData="FileManagerData" @express="checkImage" ></FileManager> 
 
    </div>

       </template>

<script lang="ts" setup>

import { ref,defineEmits, watch, inject } from 'vue'

import { Picture as IconPicture } from '@element-plus/icons-vue'

import FileManager from '../../Common/file-manager.vue'
const VITE_URL:any = window.VITE_URL;
const WQ_ADDONS_URL = window.WQ_ADDONS_URL;
const emit:any = defineEmits();
// interface Props {
//     product:object,
//     goods_images:Object
// }

// const {
//     product,
//     goods_images
// } = defineProps<Props>()

const product:any = inject('product')
// const goods_images = ref<Array>( product.goods_images );
const FileManagerData:any = ref<object>({
    visible:false,
    image:'',
    imageObj:null,
});

watch( product, (newVal, oldVal )=>{ console.log(newVal,oldVal)},
    {immediate:true} )

const chooseImage = () => {

    console.log('choose image')
    FileManagerData.value.visible = true;
    FileManagerData.value.image = '';
    FileManagerData.value.imageObj = null;
}

const chooseExtraImage = ( imageObj:any ) => {

    console.log('choose extra image')
    FileManagerData.value.visible = true;
    FileManagerData.value.image = '';
    FileManagerData.value.imageObj = imageObj;


}

const checkImage = ( data:any ) => {

    console.log( data )
    // product.image = data.image.url
    // product.image = data.image.path
    // console.log( product );
    if( FileManagerData.value.imageObj ){
        FileManagerData.value.imageObj.url = data.image.path
    }else{
        let product_data = {    
            image:data.image.path
        }
        emit('product-refresh', product_data)
    }

    
}

const addGoodsImage = (  ) => {
    console.log( product.value )
    product.value.goods_images.push({
        url         : '',
        sort_order  : 0
    });

    // console.log( goods_images )

    // let product_data = {

    //     goods_images : goods_images
        
    // }

    // emit('product-refresh', product_data)
}

const deleteGoodsImage = ( index:any ) => {
    
    product.value.goods_images.splice( index, 1 );
}

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>



.el-image{

    width:200px;
    height:200px;

}


.el-image .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.el-image .image-slot .el-icon {
  font-size: 30px;
}

</style>

